/*
 * @Description: 
 * @Author: charles
 * @Date: 2021-11-15 09:24:04
 * @LastEditors: charles
 * @LastEditTime: 2021-11-15 10:01:27
 */
import {connect} from 'react-redux'
import {createRef} from 'react'
function Todo(props){
  const dispatch = props.dispatch;
  const _input = createRef()
  const submitHandler = (event)=>{
    event.preventDefault();
    let todo = {
      id:new Date().getTime(),
      name:_input.current.value
    }
    // 如何将todo加入到状态机？
    dispatch({type:'ADD_TODO',payload:todo})
  }
  const delHandler = (event,id)=>{
    event.preventDefault();
    dispatch({type:'REMOVE_TODO',payload:id})
  }
  return (
    <div>
      <h2>待办事项</h2>
      <div>
        <form onSubmit={submitHandler}>
          待办 <input type="text" ref={_input}/>
          <input type="submit" value="提交"/>
        </form>
      </div>
      <ul>
        {
          props.todos.list.map(item=>{
            return (
              <li key={item.id}>
                {item.name}
                <a href="" onClick={(event)=>{
                  delHandler(event,item.id)
                }}>删除</a>
              </li>
            )
          })
        }
      </ul>
    </div>
  )
}
export default connect(
  //mapStateToProps,  mapState
  (state)=>{
    return state;
  }
  //,
  //mapDispatchToProps
  // (dispatch,props)=>{
  //   return {
  //     addTodo(){
  //       dispatch({type:'ADD_TODO',payload:props})
  //     }
  //   }
  // }
)(Todo);
